<!DOCTYPE html>
<html>

<head>
    <title>Foundation 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- css 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
    <!-- jQuery 库 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
    <!-- modernizr.js 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

    <div class="row">
        <div class="medium-12 columns">
            <div class="panel">
                <h1>Foundation 页面</h1>
                <p>重置窗口大小，查看效果！</p>
                <button type="button" class="button small">我是按钮!</button>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="medium-4 columns">
            <h3>菜鸟教程</h3>
            <p>学的不仅是技术，更是梦想！！！</p>
        </div>
        <div class="medium-4 columns">
            <h3>菜鸟教程</h3>
            <p>学的不仅是技术，更是梦想！！！</p>
        </div>
        <div class="medium-4 columns">
            <h3>菜鸟教程</h3>
            <p>学的不仅是技术，更是梦想！！！</p>
        </div>
    </div>
</body>

</html>